@import (reference) "~weaver-mobile/dist/weaver-mobile.less";

.wm-route-layout { 
  .picture-container {
    height: 100%;
    background: #f4f4f4;
  }
  .wf-map-header {
    font-size: 12 * @hd;
    // display: none;
    visibility: hidden;
    background: #f4f4f4;
    .wrap-box {
      padding: 10 * @hd 15 * @hd;
      overflow: hidden;
      .btn-mask {
        width: 83px;
        height: 31px;
        position: absolute;
        left: 106px;
        z-index: 2;
        border-radius: 3px;
      }
      .btn {
        display: flex;
        align-items: center;
        float: left;
        width: 70 * @hd;
        height: 30* @hd;
        padding: 0 5* @hd;
        border: 1px solid #CCCCCC;
        border-radius: 3* @hd;
        margin-right: 10* @hd;
        span {
          display: inline-block;
          width: 13* @hd;
          height: 11* @hd;
          margin-right: 5* @hd;
          background-color: #fff;
          border: 1px solid #E2E2E2;
          svg {
            position: relative;
            left: -1* @hd;
            top: -1 * @hd;
          }
        }
        span.active {
          background-color: #098FEA ;
        }
        
      }
      .btn.all-view-btn {
        span {
          color: #fff;
        }
      }
      .btn.active {
        color: #00A9FF;
        border-color: #00A9FF;
      }
      .btn.not-allow-click {
        color: #B2B2B2;
        span {
          background-color: #E1E1E1;
          border: 1px solid #969696;
          color: #E1E1E1;
        }
      }
      .descript-word-show {
        margin-left: 93 * @hd;
        height: 30 * @hd;
        overflow: hidden;
        position: relative;
        .fold-arrow {
          position: absolute;
          right: -7px;
          top: 8 * @hd;
          width: 20 * @hd;
          height: 20 * @hd;
        }
        .content-wrap {
          display: inline-block;
          margin: 5* @hd 10* @hd;
          p {
            display: inline-block;
            margin-left: 3* @hd;
          }
          span {
            display: inline-block;
            margin-right: 5* @hd;
            width: 14* @hd;
            height: 14* @hd;
            position: relative;
            top: 3* @hd;
          }
          span.passed-node {
            border: 1px solid #49A8D4;
            background-color: #a9e3ff;
          }
          span.not-pass-node {
            border: 1px solid #5ABD6B;
            background-color: #BFF3C3;
          }
          span.current-node {
            border: 1px solid #F5B87B;
            background-color: #FFE8CC;
          }
          span.auto-pass-node {
            border: 1px solid #DC4446;
            background-color: #A9E2FF;
          }
          .arrow{
            width: 26* @hd;
            border-bottom: 1px solid #DC4446;
            color: #DC4446;
            position: relative;
            top: -4px !important;
              svg {
                position: relative;
                right: -17px;
                top: 7px;
              }
          }
          .arrow.not-pass-exit {
            color: #979797;
            border-bottom: 1px solid #979797;
          }
        }
      }
      .descript-word-hidden {
        display: none;
      }
      .word-align-left {
        margin-left: unset;
      }
    }
    .top-btn-area-hidden {
      display: none;
    }
    .wrap-box.bottom-description-area {
      p {
        span {
          margin-right: 5* @hd;
        }
        .rectangle {
          display: inline-block;
          width: 13* @hd;
          height: 13* @hd;
          background-color: #1BD1C5;
          position: relative;
          top: 2px;
        }
        .maybeicon {
          color: #1bd1c5;
          position: relative;
          top: -1px;
        } 
        .icon {
          color: #1BD1C5;
        }
        .arrow {
          display: inline-block;
          position: relative;
          width: 20* @hd;
          border-bottom: 1px solid #1BD1C5;
          top: -6px;
          svg {
            position: relative;
            top: 10px;
            right: -12px;
          }
        }
      }
    }
    p {
      margin: 0 0 0 5* @hd;
      padding: 0;
      display: inline-block;
    }
    .warn-top-info {
      margin: 10px 10px 0 10px;
      padding: 5px;
      border: 1px solid #FFD073;
      background: #FFF3DC;
      font-size: 12px;
      p {
        display: inline-block;
        svg {
          color:#FFAA00;
          margin-right: 5px;
          position: relative;
          top: 2px;
        }
        .reset-forecast-link {
          color: #4d7ad8;
        }
      }
      span {
        margin: 0 5* @hd;
      }
    }
  }
  #wf-map-container {
    height: 100%;
    .map-box {
      height: 100%;
      position: relative;
      .loading-wrap {
        position: absolute;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .map-box-hidden {
      display: none;
    }
    .map-box-show {
      display: block;
    }
  }

}
